<template>
  <el-container style="height: 100%; border: 1px solid #eee">
    <el-aside
      width="40%"
      style="background-color: rgb(238, 241, 246); padding: 10px 20px"
    >
      <div class="info-box">
        <div>案件编号：{{ info.DSPS_ID }}</div>
        <div>
          案件日期：{{
            info.DSPS_ReportDate == null
              ? '未确定'
              : info.DSPS_ReportDate.split(' ')[0]
          }}
        </div>
      </div>
      <div class="info-box">
        <div>桩号：{{ info.DSPS_No }}</div>
        <div>线路名称：{{ info.DSPS_LineName }}</div>
      </div>
      <div class="info-box">
        <div>经度：{{ info.DSPS_Lat }}</div>
        <div>纬度：{{ info.DSPS_lng }}</div>
      </div>
      <div class="info-box">
        <div>核损金额：{{ info.DSPS_AuditPrice }}</div>
      </div>
      <div class="info-box">
        <div>不足额比：{{ info.DSPS_DeficiencyPercent }}%</div>
        <div>责任比：{{ info.DSPS_DutyPercent }}%</div>
      </div>
      <div class="info-box">
        <div>免赔：{{ info.DSPS_NoPayPrice }}</div>
        <div>理赔：{{ info.DSPS_PayPrice }}</div>
      </div>
      <el-tabs
        style="margin-top: 10px"
        v-model="activeIndex"
        type="border-card"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="(term, index) in info.terms"
          :key="index"
          :label="term.DSTR_Name"
          :name="index.toString()"
        ></el-tab-pane>
        <div>
          <div class="info-box">
            毁损类型：{{ currentTerm.DSTR_DestroyType }}
          </div>
          <div class="info-box">修复情况：{{ currentTerm.DSTR_IsRepair }}</div>
          <div class="info-box">
            <div>毁损单位：{{ currentTerm.DSTR_Unit }}</div>
            <div>毁损量：{{ currentTerm.DSTR_Quantity }}</div>
          </div>
          <div class="info-box">
            <div>报损价格：{{ currentTerm.DSTR_ReportPrice }}</div>
            <div>报损金额：{{ currentTerm.DSTR_TotalReportPrice }}</div>
          </div>
          <div class="info-box">
            <div>核损数量：{{ currentTerm.DSTR_EliminateQuantity }}</div>
            <div>核损价格：{{ currentTerm.DSTR_EliminatePrice }}</div>
          </div>
          <div class="info-box">
            <div>核损金额：{{ currentTerm.DSTR_TotalEliminatePrice }}</div>
          </div>
        </div>
      </el-tabs>
    </el-aside>

    <el-container style="padding: 20px" direction="vertical">
      <div class="title">
        <div>现场勘察图</div>
        <el-button @click="addImage('1')" type="primary">添加图片</el-button>
      </div>
      <div style="margin: 10px 0 30px 0; display: flex; flex-wrap: wrap">
        <div
          style="
            position: relative;
            width: 200px;
            height: 200px;
            margin: 10px 20px;
          "
          v-for="(image, index) in surveyList"
          :key="index"
        >
          <el-image
            style="width: 200px; height: 200px"
            :src="image"
            :preview-src-list="surveyList"
          ></el-image>
          <i
            @click="DeleteImg(surveyListIds[index])"
            class="el-icon-error delete-btn"
          ></i>
        </div>
      </div>

      <div class="title">
        <div>卫星图</div>
        <el-button @click="addImage('2')" type="primary">添加图片</el-button>
      </div>
      <div style="margin: 10px 0 30px 0; display: flex; flex-wrap: wrap">
        <div
          style="
            position: relative;
            width: 200px;
            height: 200px;
            margin: 10px 20px;
          "
          v-for="(image, index) in satelliteList"
          :key="index"
        >
          <el-image
            style="width: 200px; height: 200px"
            :src="image"
            :preview-src-list="satelliteList"
          ></el-image>
          <i
            @click="DeleteImg(satelliteListIds[index])"
            class="el-icon-error delete-btn"
          ></i>
        </div>
      </div>
    </el-container>

    <el-dialog :visible.sync="addImgVis" destroy-on-close title="添加图片">
      <uploadImageForm
        @closeDialog="closeDialog"
        :position="info"
        :type="imageType"
      ></uploadImageForm>
    </el-dialog>
  </el-container>
</template>
  
  
  <script>
import { GetPosition, DeleteImage } from '@/api/project/position.js'
import uploadImageForm from '../components/uploadImage.vue'
export default {
  components: { uploadImageForm },
  data() {
    return {
      id: 0,
      activeIndex: '0',
      currentTerm: {},
      TotalContainPrice: 0,
      TotalEliminatePrice: 0,
      surveyList: [],
      surveyListIds: [],
      satelliteList: [],
      satelliteListIds: [],
      addImgVis: false,
      imageType: '',
      info: {},
    }
  },
  watch: {},

  methods: {
    closeDialog() {
      this.addImgVis = false
      this.doGetPosition()
    },
    handleClick(tab, event) {
      this.currentTerm = this.info.terms[parseInt(this.activeIndex)]
    },
    addImage(type) {
      this.imageType = type
      this.addImgVis = true
    },
    DeleteImg(id) {
      var that = this
      this.$confirm('此操作将永久删除图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          DeleteImage(id).then((r) => {
            that.doGetPosition()
            this.$message({
              type: 'info',
              message: '已成功删除',
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    doGetPosition() {
      GetPosition(this.id).then((r) => {
        this.info = r.data
        this.TotalContainPrice = 0
        this.TotalEliminatePrice = 0
        this.info.terms.forEach((term) => {
          this.TotalContainPrice += term.DSTR_TotalContainPrice
          this.TotalEliminatePrice += term.DSTR_TotalEliminatePrice
        })
        this.surveyList = []
        this.surveyListIds = []
        this.satelliteList = []
        this.satelliteListIds = []
        this.info.images.forEach((image) => {
          if (image.DSIM_Type == 1) {
            this.surveyList.push('/FileRoot/' + image.DSIM_Path)
            this.surveyListIds.push(image.DSIM_ID)
          }
          if (image.DSIM_Type == 2) {
            this.satelliteList.push('/FileRoot/' + image.DSIM_Path)
            this.satelliteListIds.push(image.DSIM_ID)
          }
        })
        this.currentTerm = r.data.terms[0]
      })
    },
  },
  created: function () {
    this.id = this.$route.query.id
  },
  mounted: function () {
    this.doGetPosition()
  },
}
</script>
<style scoped>
.title {
  height: 40px;
  line-height: 40px;
  display: flex;
}
.title div {
  flex: 1;
}
.title:before {
  width: 10px;
  height: 25px;
  margin: 7.5px;
  background-color: blue;
  content: '';
}
.info-box {
  line-height: 35px;
  display: flex;
  font-size: 15px;
}
.info-title {
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  font-weight: bolder;
}
.info-box div {
  flex: 1;
}

.info-image {
  width: 50px;
  height: 50px;
}

.delete-btn {
  display: block;
  position: absolute;
  right: -10px;
  top: -10px;
  color: red;
  font-size: 22px;
}
</style>
  